<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>志愿者认证-win</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />

    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .right{
            color:#333!important;
        }
        body{
            background:#fff;
        }
        .container{
            width:100%;
            padding:2.25rem 0;
            background:#f5f5f5;

        }
        .stage{
            width:64%;
            margin:auto;
            display: flex;
            align-items: center;

        }
        .round{
            width:0.75rem;
            height:0.75rem;
            background:#3994F6;
            border-radius:50%;
        }
        .round1{
            width:0.75rem;

            height:0.75rem;
            background:#E6E6E6;
            border-radius:50%;
        }
        .line{
            width:41%;
            height:2px;
        }
        .underLinee{
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0,#DBDBDB,#DBDBDB 50%,transparent 50%);
            background-image: -webkit-linear-gradient(90deg,#DBDBDB,#DBDBDB 50%,transparent 50%);
        }
        .stageName{
            width:71.25%;
            margin:auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left:12.36%;
            margin-right:16.39%;
            margin-top:0.7rem;;
        }
        .name{
            font-size:0.75rem;
            color:#333;
        }
        .person{
            padding:0 0.8rem;
        }
        .box{
            width:100%;
            height:2.5rem;
            line-height:2.5rem;
        }
        .info{
            font-size:0.8rem;
            color:333;
        }
        input[type='text']{
            width:55%;
            text-align:right;
            color:#333;
            font-size:0.8rem;
            padding:0;
            border:none;
            background:#fff;
        }
        .data1{
            font-size:0.8rem;
            color:#999;
        }
        input::-webkit-input-placeholder {
            font-size:0.8rem;
            color:#999;
            text-align:right;
        }
        .arrow{
            width:0.75rem;
            height:100%;
            background:url(__IMG__goto.png) no-repeat center center;
            background-size:0.75rem 0.75rem;
            margin-left:0.25rem;
        }
        .next{
            width:100%;
            height:2.5rem;
            line-height: 2.5rem;
            color:#fff;
            font-size:0.8rem;
            font-weight:500;
            text-align:center;
            border-radius:0.25rem;
            margin:auto;
            margin-top:3.4rem;
            background:#E73C5C;
        }
    </style>
</head>

<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">志愿者认证</div>
</header>
<div class="container">
    <div class="stage">
        <div class="round"></div>
        <div class="line underLinee"></div>
        <div class="round1"></div>
        <div class="line underLinee"></div>
        <div class="round1"></div>
    </div>
    <div class="stageName">
        <div class="name">身份认证</div>
        <div class="name">执业认证</div>
        <div class="name">完成</div>
    </div>
</div>
<div class="person">
    <div class="box underLine2 flex-wrap">
        <div class="info">姓名</div>
        <div class="flex-con"></div>
        <input type="text" class="data" placeholder="输入姓名" id="name" maxlength="20" minlength="4">
    </div>
    <div class="box underLine2 flex-wrap">
        <div class="info">身份证号</div>
        <div class="flex-con"></div>
        <input type="text" class="data" placeholder="输入身份证号" id="card"  maxlength="18" value="342201199202069065">
    </div>
    <div class="box underLine2 flex-wrap" onclick="jigou()" tapmode='active'>
        <div class="info">所属机构</div>
        <div class="flex-con"></div>
        <div class="data1"  id="mechanism_id">请选择</div>
        <div class="arrow"></div>
    </div>
    <div class="box underLine2 flex-wrap" onclick="area()" tapmode='active'>
        <div class="info">所在地区</div>
        <div class="flex-con"></div>
        <div class="data1" id="shi">请选择</div>
        <div class="arrow"></div>
    </div>
    <div class="next" onclick="fnNext()" tapmode='active'>下一步</div>
</div>
<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>

<script type="text/javascript">
    $(function () {
        getdata();
    })
// 获取数据

    function getdata() {
        loaddingOpen();
        $.ajax({
            url:'{:url("My/approvBack")}',
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();

                if (data.status==200) {
                    $('#name').val(data.data.user_rel_name);
                    $('#card').val(data.data.user_card);
                    if (data.data.district==null) {

                    }else {
                        $('#shi').html(data.data.district);
                        $('#shi').attr('data-id',data.data.district_id);
                    }
                    if (data.data.mechanism_name==null) {
                    }else {
                        $('#mechanism_id').html(data.data.mechanism_name);
                        $('#mechanism_id').attr('data-id',data.data.user_to_mechanism_id);
                    }

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });

    }

    function fnNext() {
        var cardnum=$('#card').val();
        if ($('#name').val()=='') {
            toast('请输入姓名');
            return;
        }
        if ($('#card').val()=='') {
            toast('请输入身份证号');
            return;
        }
        var reg1 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        var reg2 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        if ($('#card').val().length!=15&&$('#card').val().length!=18) {
            toast('请输入正确的身份证号');
            // return;
        }else {
            if ($('#card').val().length==18) {
                if (!(reg1.test(cardnum))) {
                    toast('请输入正确的身份证号');
                    return;
                }else {
                }
            }else {
                if (!(reg2.test($('#card').val()))){
                    toast('请输入正确的身份证号');
                    return;
                }
            }
        }
        if ($('#mechanism_id').innerHTML=='请选择') {
            toast('请选择机构');
            return;
        }
        if ($('#shi').innerHTML=='请选择') {
            toast('请选择地区');
            return;
        }
        var data2={
            name:$('#name').val(),
            card:$('#card').val(),
            mechanism_id:$('#mechanism_id').attr('data-id'),
            shi:$('#shi').attr('data-id')

        };
        loaddingOpen();
        $.ajax({
            url:'{:url("My/approveFirst")}',
            data:data2,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                if (data.status=='200') {
                    window.location.href='{:url("my/zhiyuanzhe_renzheng2")}';

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });


    }
    function jigou() {
        var mechanism_id=document.getElementById('mechanism_id').innerHTML;
        var card=document.getElementById('card').value;
        var name=document.getElementById('name').value;
        var shi=document.getElementById('shi').innerHTML;
        if (mechanism_id=='请选择') {
            mechanism_id='';
        }else {
            mechanism_id =  $('#mechanism_id').attr('data-id');

        }
        if (shi=='请选择') {
            shi='';
        }else {
            shi =  $('#shi').attr('data-id');

        }
        window.location.href='{:url("my/select_jigou")}?json='+name+'='+card+'='+mechanism_id+'='+shi;
    }

    function area() {
        var mechanism_id=document.getElementById('mechanism_id').innerHTML;
        var card=document.getElementById('card').value;
        var name=document.getElementById('name').value;
        var shi=document.getElementById('shi').innerHTML;

        if (mechanism_id=='请选择') {
            mechanism_id='';
        }else {
            mechanism_id =  $('#mechanism_id').attr('data-id');

        }
        if (shi=='请选择') {
            shi='';
        }else {
            shi =  $('#shi').attr('data-id');

        }
        window.location.href='{:url("my/select_area2")}?json='+name+'='+card+'='+mechanism_id+'='+shi;

    }
</script>

</html>
